<!--
 * @Author: 李金深 2896583081@qq.com
 * @Date: 2023-05-23 15:02:30
 * @LastEditors: 李金深 2896583081@qq.com
 * @LastEditTime: 2023-09-09 10:28:23
 * @FilePath: /com.huizhouyiren.web.d0101/src/components/bottom/bottom.vue
 * @Description: 网站底部信息栏组件
-->
<script setup>
import { ref, watch } from "vue"
import { useRoute } from "vue-router"
import { useSystem } from "@/stores/system"
import { getBottomMenuRequest, getBottomInfoRequest } from "@/api/system"
import { CloseSharp } from "@vicons/ionicons5";
import mitt from "@/mitt/index"



const route = useRoute()
const systemStore = useSystem()
let show = ref(true)
let menu = ref([])
let showModal = ref(false)
let content = ref(null)
let loading = ref(false)
/**
 * @description: 获取菜单列表
 * @return {*}
 */
const getBottomMenu = () => {
    getBottomMenuRequest().then(res => {
        console.log(res)
        if (res.code == 200) {
            menu.value = res.data
        } else {
            mitt.emit('messageTip', {
                type: "error",
                msg: res.msg,
            })
        }
    })
}
getBottomMenu()

/**
 * @description: 获取菜单详情
 * @param {*} id
 * @return {*}
 */
const getBottomInfo = (id) => {
    loading.value = true
    getBottomInfoRequest({ id }).then(res => {
        if (res.code == 200) {
            content.value = res.data.content
        } else {
            mitt.emit('messageTip', {
                type: "error",
                msg: res.msg,
            })
        }
    }).finally(() => {
        loading.value = false
    })
}


let modalTitle = ref("")

/**
 * @description: 打开弹窗
 * @return {*}
 */
const openModal = (menuItem) => {
    getBottomInfo(menuItem.id)
    modalTitle.value = menuItem.title
    showModal.value = true
}
/**
 * @description: 关闭弹窗
 * @return {*}
 */
const closeModal = () => {
    showModal.value = false
}


watch(() => route.fullPath, () => {
    if (route.fullPath.includes("/chat")) {
        show.value = false
    } else {
        show.value = true
    }
}, {
    immediate: true
})

</script>
<template>
    <div class="flex items-center justify-center w-full py-8" v-show="show">
        <div class="text-sm text-center text-gray-600 box_width">
            <div class="flex items-center justify-center">
                <div v-for="(item, index) in menu" :key="item.id" class="flex items-center " @click="openModal(item)">
                    <span class="duration-500 cursor-pointer hover:text-blue-500 hover:font-bold">{{ item.title }}</span>
                    <span style="display: inline-block;width: .0625rem;height: .75rem"
                        v-if="index != systemStore.bottom.length - 1" class="mx-2 bg-gray-500"></span>
                </div>
            </div>
            <div class="mt-2 mb-1">
                {{ systemStore.site_copyright }}
            </div>
        </div>
    </div>
    <n-modal v-model:show="showModal">
        <div class="overflow-hidden bg-white rounded-md" style="width: 80vw;max-width: 43.75rem;">
            <div style="height: 3.125rem;"
                class="relative flex items-center justify-center border-b border-gray-200 border-solid">
                <div class="font-bold">{{ modalTitle }}</div>
                <div class="absolute flex items-center justify-center rounded-full cursor-pointer bg-primary right-2 top-3"
                    style="width: 1.25rem;aspect-ratio: 1;" @click="closeModal">
                    <CloseSharp color="white" style="width: 16px;margin-top: 2px;" />
                </div>
            </div>
            <div class="p-4" style="height: 60vh;max-height: 37.5rem;overflow-y: scroll;">
                <div v-if="loading">
                    <n-skeleton height="1.875rem" width="25%" style="margin-bottom: .625rem;" />
                    <n-skeleton height="1.875rem" width="50%" style="margin-bottom: .625rem;" />
                    <n-skeleton height="1.875rem" width="75%" style="margin-bottom: .625rem;" />
                    <n-skeleton height="1.875rem" width="100%" />
                </div>
                <div v-html="content" v-else></div>
            </div>
        </div>
    </n-modal>
</template>

<style lang="less" scoped></style>